<template>
    <div>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入要搜索的内容" v-model="query.query" class="input-with-select" style="width: 64%;">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            <el-button type="primary" style="margin-left: 6%;" @click="dialogFormVisible = true">添加用户</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="userList" :border="true" style="margin-top: 10px;">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="mobile" label="电话">
            </el-table-column>
            <el-table-column prop="role_name" label="角色">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949"
                        @change="cut(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row.id)"></el-button>
                    <el-button type="warning" icon="el-icon-star-off" @click="allocation(scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)" circle></el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="query.pagenum" :page-sizes="[1, 3, 5, 10]" :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 添加用户弹出框 -->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账户:" prop="username">
                    <el-input v-model="form.username" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="form.password" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="邮 箱:">
                    <el-input v-model="form.email" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="电 话:">
                    <el-input v-model="form.mobile" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
        <!-- 修改用户 -->
        <el-dialog title="修改用户" :visible.sync="userPop" width="30%">
            <el-form :model="usersForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名:">
                    <el-input v-model="usersForm.username" style="width: 60%;" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:">
                    <el-input v-model="usersForm.email" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="手机:">
                    <el-input v-model="usersForm.mobile" style="width: 60%;"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="userPop = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- //分配角色弹出框 -->
        <el-dialog title="分配角色" :visible.sync="assign" width="30%">
            <el-form :model="rols" label-width="100px" class="demo-ruleForm">
                <el-form-item label="当前的用户">
                    {{ rols.username }}
                </el-form-item>
                <el-form-item label="当前的角色">
                    {{ rols.role_name }}
                </el-form-item>
                <el-form-item label="分配新角色">
                    <el-select v-model="region" placeholder="请选择新角色">
                        <el-option v-for="(item, index) in select" :key="index" :label="item.roleName" :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="assign = false">取 消</el-button>
                <el-button type="primary" @click="confirmrols">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import { users, add, del, inquire, edit, cut } from '@/http/user';
import { assigns } from '@/http/roles'
import { getRoles } from '@/http/roles'
//lodash引入 lodash是模块化的函数库.
import _ from 'lodash'

import { number } from 'echarts';

export default {
    data() {
        return {
            query: {
                query: '',
                pagenum: 1,
                pagesize: 3
            },
            userList: [],
            total: 0,
            currentPage4: 1,
            role: true,
            //添加弹出框
            dialogFormVisible: false,
            //修改弹出框
            userPop: false,
            //选择的角色
            region: '',
            //分配角色弹出框
            assign: false,
            form: {
                username: '',
                password: '',
                email: '',
                mobile: ''
            },
            //分配角色数据
            rols: {

            },
            select: [],
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },

                ],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' },]
            },
            status: false,
            // 修改用户参数
            usersForm: {
                id: '',//不能为空
                username: '',
                mobile: '',
                email: ''
            }
        }
    },
    watch: {
        userList: {
            handler(n) {
                if (n.length == 0 && this.query.pagenum > 1) {
                    this.query.pagenum--
                    this.fn()
                }
            }
        }
    },
    methods: {
        handleSizeChange(v) {
            this.query.pagesize = v
            this.fn()
        },
        handleCurrentChange(v) {
            this.query.pagenum = v
            this.fn()
        },
        //渲染页面
        async fn() {
            await users(this.query).then(res => {
                this.total = res.data.total
                this.userList = res.data.users
            })
        },
        //修改用户
        async edit(id) {

            this.userPop = true;
            let res = await inquire(id)

            this.usersForm = res.data
        },
        //修改确定
        async confirm() {
            let { id, email, mobile } = this.usersForm
            let res = await edit(id, { email, mobile })
            this.$message.success(res.meta.msg)
            this.userPop = false
            this.fn()
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    add(this.form).then(res => {
                        console.log(res);
                        if (res.meta.status < 300) {
                            this.$message({
                                message: res.meta.msg,
                                type: 'success'
                            });
                            this.fn()
                        } else {
                            this.$message.error(res.meta.msg);
                        }

                    })
                    this.form = {
                        username: '',
                        password: '',
                        email: '',
                        mobile: ''
                    },
                        this.dialogFormVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //删除
        del(obj) {


            del(obj.id).then(res => {
                if (res.meta.status < 300) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    });
                    this.fn()


                } else {
                    this.$message.error(res.meta.msg);
                }
            })


        },
        // search() {
        //     this.query.pagenum = 1
        //     this.fn()
        // },
        //搜索    防抖
        search: _.debounce(function () {
            this.query.pagenum = 1
            this.fn()
        }, 2000),
        //分配角色
        allocation(obj) {
            console.log(obj);
            this.rols = obj
            this.rols.region = ''
            this.assign = true
            getRoles().then(res => {
                this.select = res.data
            })
        },
        //分配角色确定
        async confirmrols() {
            console.log(this.rols.id, this.region);
            let res = await assigns(this.rols.id, this.region)
            this.fn()
            this.assign = false
        },
        //切换
        async cut(val) {
            let { id, mg_state } = val
            let res = await cut(id, mg_state)
            if (res.meta.status < 300) {
                this.$message({
                    message: res.meta.msg,
                    type: 'success'
                });
                this.fn()


            } else {
                this.$message.error(res.meta.msg);
            }
        }
    },
    created() {
        this.fn()
    }
}
</script>

<style lang="scss" scoped>
</style>